<template>
  <div class="relative h-[80vh] min-h-[500px] overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-black/30 z-10"></div>
    <img 
      src="https://picsum.photos/id/1059/1920/1080" 
      alt="旅游背景图" 
      class="absolute inset-0 w-full h-full object-cover object-center"
    >
    <div class="relative z-20 container mx-auto px-4 h-full flex flex-col justify-center">
      <div class="max-w-2xl">
        <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white mb-4 leading-tight">
          探索世界<br>发现美好
        </h1>
        <p class="text-white/90 text-lg mb-8 max-w-xl">
          从浪漫的巴黎到神秘的东京，从繁华的纽约到古老的罗马，我们为您提供全球最热门的旅游目的地指南。
        </p>
        <div class="relative max-w-md">
          <input 
            type="text" 
            placeholder="搜索城市或国家..." 
            class="w-full pl-10 pr-4 py-4 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50"
            v-model="searchQuery"
            @input="handleSearch"
          >
          <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
      </div>
    </div>
    <div class="absolute bottom-8 left-0 right-0 z-20">
      <div class="container mx-auto px-4">
        <div class="flex flex-wrap justify-center gap-4">
          <span class="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm">
            <i class="fa fa-map-marker mr-1"></i> 6个热门城市
          </span>
          <span class="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm">
            <i class="fa fa-camera mr-1"></i> 18个景点
          </span>
          <span class="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm">
            <i class="fa fa-comment mr-1"></i> 12条用户评价
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    
    // 搜索查询
    const searchQuery = ref('');
    
    // 处理搜索
    const handleSearch = () => {
      store.dispatch('setSearchQuery', searchQuery.value);
      if (searchQuery.value) {
        router.push({ name: 'search' });
      }
    };
    
    return {
      searchQuery,
      handleSearch
    };
  }
};
</script>

<style scoped>
.hero-section {
  height: 80vh;
  min-height: 500px;
}
</style>
